<style lang="less">
  @import '../styles/common.less';
  @import '../tables/components/table.less';
</style>

<template>
  <div>
    <Row :gutter="10">
      <Card>
        <div class="table-head">
          <!--<Button type="primary" class="Button" @click="ExportData()">导出数据</Button>-->
          <!--<Button type="primary" class="Button" @click="remove()">删除</Button>-->
          <Button type="primary" class="Button" @click="add()">资产申请</Button>
        </div>
        <Row class="margin-top-10">
          <Table stripe border :columns="columns" :data="data" @on-row-click="onRowData"
                 @on-selection-change="selectionChange"></Table>
        </Row>
        <!--<div style="margin: 10px;overflow: hidden;height: 36px;">
          <div style="float: right;">
            <Page :total="total" :current="page" @on-change="changePage" show-elevator></Page>
          </div>
        </div>-->
      </Card>
      <Modal :width="600" title="详情"
             v-model="showCurrentTableData"
             ok-text="确定"
             cancel-text="取消"
             @on-ok=""
             @on-cancel=""
             class-name="vertical-center-modal"
             class="Modal-Detail-div">
        <Form label-position="top">
          <FormItem label="物品名">
            <div class="dataDetail-div" v-text="dataDetail.asset_type ? dataDetail.asset_type.title : ''"></div>
          </FormItem>
          <FormItem label="数量">
            <div class="dataDetail-div" v-text="dataDetail.asset_count"></div>
          </FormItem>
          <FormItem label="申领时间">
            <div class="dataDetail-div" v-text="dataDetail.receive_time"></div>
          </FormItem>
          <FormItem label="物品编号">
            <div class="dataDetail-div">
              <div v-for="el in dataDetail.asset_number" v-text="el"></div>
            </div>
          </FormItem>

        </Form>
      </Modal>
      <!--资产申请-->
      <Modal v-model="addCurrentTableData" :width="600" :mask-closable="false" :closable="false"
             class-name="vertical-center-modal" class="Modal-Detail-div">
        <h3 slot="header" style="color:#2D8CF0">资产申请</h3>
        <Form label-position="top">
          <FormItem label="物品名">
            <Select v-model="addData.type_id" :transfer="true" style="width:100%;">
              <Option v-for="item in addData.typeArr" :value="item.id" :key="item.id">{{ item.title }}</Option>
            </Select>
          </FormItem>
          <FormItem label="个数">
            <InputNumber :max="1000" :min="1" v-model="addData.number" class="InputNumber"></InputNumber>
          </FormItem>
          <FormItem label="申请说明">
            <Input v-model="addData.description" type="textarea" class="textarea_resize"
                   :autosize="{minRows: 3}" placeholder="申请说明"></Input>
          </FormItem>
          <FormItem label="审批人">
            <Select v-model="addData.approvers" :transfer="true" style="width:100%;">
              <Option v-for="item in approversArr" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="知会人">
            <div class="dataDetail-div">
              <Tree ref="FixedAssets_tree" :data="TreeData" show-checkbox multiple></Tree>
            </div>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="text" @click="hideAddModal">取消</Button>
          <Button type="primary" :loading="saveLoading" @click="save()">确定</Button>
        </div>
      </Modal>
      <!--资产报修-->
      <Modal v-model="showRepairModal" :width="600" :mask-closable="false" :closable="false"
             class-name="vertical-center-modal" class="Modal-Detail-div">
        <h3 slot="header" style="color:#2D8CF0">资产报修</h3>
        <Form label-position="top">
          <FormItem label="物品名">
            <div class="dataDetail-div" v-text="repair.type_title"></div>
          </FormItem>
          <FormItem label="报修物品">
            <div class="dataDetail-div">
              <CheckboxGroup v-model="repair.Checkbox">
                <Checkbox v-for="(el,index) in repair.dataDetail.asset_number" :key="index"
                          :label="el"></Checkbox>
              </CheckboxGroup>
            </div>
          </FormItem>
          <FormItem label="报修原因">
            <Input v-model="repair.title" placeholder="报修原因"></Input>
          </FormItem>
          <FormItem label="报修说明">
            <Input v-model="repair.description" type="textarea" class="textarea_resize"
                   :autosize="{minRows: 3}" placeholder="报修说明"></Input>
          </FormItem>
          <FormItem label="审批人">
            <Select v-model="repair.approvers" :transfer="true" style="width:100%;">
              <Option v-for="item in approversArr" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="知会人">
            <div class="dataDetail-div">
              <Tree ref="repair_tree" :data="TreeData" show-checkbox multiple></Tree>
            </div>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="text" @click="hideRepairModal">取消</Button>
          <Button type="primary" :loading="saveLoading" @click="saveRepair()">确定</Button>
        </div>
      </Modal>
    </Row>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import Utils from '../../libs/mod.utils';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  export default {
    components: {},
    data () {
      return {
        total: 0,
        page: 1,
        size: 10,
        id: '',
        searchConName: '',
        searchConTel: '',
        showCurrentTableData: false,
        loading: true,
        showCurrentColumns: [],
        editInlineAndCellData: [],
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            key: 'asset_type',
            title: '物品名',
            render: (h, params) => {
              var title = params.row.asset_type.title;
              return h('div', [
                h('span', title)
              ]);
            }
          },
          {
            key: 'asset_count',
            title: '数量',
          },
          {
            title: 'Action',
            key: 'action',
            width: 200,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: e => {
                      e.stopPropagation();
                      var data = params.row;
                      this.showRepair(data);
                    }
                  }
                }, '报修')
              ]);
            }
          }
        ],
        data: [],
        dataDetail: {},
        initTable: [],
        format: Util.constant.format,
        addCurrentTableData: false,
        saveLoading: false,
        ajaxType: 'add',
        addData: {
          description: '',
          type_id: '',
          number: 1,
          approvers: '',
          typeArr: [],
        },
        showRepairModal: false,
        repair: {
          type_id: '',
          type_title: '',
          asset_count: 1,
          title: '',
          description: '',
          number: '',
          asset_id: [],
          approvers: '',
          inform: [],
          dataDetail: {},
          asset_Obj: {},
          Checkbox: [],
        },
        selectionArr: [],
        approversArr: [],
        TreeData: [],
        checked_dep_arr: [],
        checked_users_arr: [],
      };
    },
    mounted () {
      this.getData();
    },
    methods: {
      getData () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          page: _this.page,
          size: _this.size,
        };
        var params = {
          url: '/asset/personal/list',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.total = res.rows;
            _this.data = _data;
          } else {
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      handleSearch () {
        var _this = this;
        _this.page = 1;
        var searchConName = _this.searchConName;
      },
      changePage (page) {
        var _this = this;
        console.log('page', page);
        _this.page = page;
        _this.getData();
      },
      onRowData: function (data, index) {
        var _this = this;
        _this.show(index, data);
      },
      show: function (index, data) {
        var _this = this;
        var id = data.asset_type.id;
        _this.id = id;

        var data = {
          type_id: _this.id,
        };
        var params = {
          url: '/asset/personal/query',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.dataDetail = _data;
            _this.showCurrentTableData = true;
          } else {
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      asyncOK: function () {
        var _this = this;
        _this.showCurrentTableData = false;
      },
      // 获取审批人
      getApproversArr: function () {
        var _this = this;
        var data = {};
        var params = {
          url: '/approval/leader',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.approversArr = _data.approvers;
          } else {
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      // 获取物品名
      getFixedAssetsTypeArr: function () {
        var _this = this;
        var data = {};
        var params = {
          url: '/asset/type/list',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.addData.typeArr = _data;
          } else {
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      // 获取选人 树信息
      getTreeData: function () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          id: 1
        };
        var params = {
          url: '/department/query',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data || [];
            var TreeData = [];
            TreeData.push(data);
            _this.toDataFun(TreeData);
            _this.TreeData = TreeData;
          } else {
            _this.$Message.error('查询人员信息失败!');
          }
        }
      },
      // 处理树信息
      toDataFun: function (arr) {
        var _this = this;
        arr.forEach(function (e) {
          e.title = e.name;
          e.expand = true;//展开
          if (e.type) {
            e.type = 'dep';
            var checked_dep_arr = _this.checked_dep_arr;
            if (Utils.idInArray(e.id, checked_dep_arr)) {
              e.checked = true;// 选中
            }
          } else {
            e.type = 'user';
            var checked_users_arr = _this.checked_users_arr;
            if (Utils.idInArray(e.id, checked_users_arr)) {
              e.checked = true;// 选中
            }
          }
          var staff = e.staff || [];
          var children = e.children || [];
          if (children.length == 0) {
            e.children = [];
          }
          e.children.push(...staff);
          _this.toDataFun(e.children);
        });
      },
      // 选中文件
      handleUpload: function (file) {
        var _this = this;
        _this.UploadFile(file);
        return false;
      },
      // 上传文件
      UploadFile: function (file) {
        var _this = this;
        var name = file.name;
        var arr = name.split('.');
        var type = arr[arr.length - 1];
        if (!(Util.constant.format.indexOf(type) > -1)) {
          _this.$Message.error('请上传图片!');
          return false;
        }
        var formData = new FormData();
        formData.append("file", file);
        formData.append("type", "image");
        var params = {
          url: '/file/addFile',
          type: Util.method.post,
          data: formData,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data;
            var id = data.id;
            var name = data.name;
            var url = data.url;
            var obj = {
              id: id,
              name: name,
              url: url,
            };
            _this.addData.accessory.push(obj);
          } else {
            _this.$Message.error('上传失败!');
          }
        }
      },
      // 删除附件
      delAccessory: function (el) {
        var _this = this;
        var id = el.id;
        var accessory = _this.addData.accessory;
        for (var k in accessory) {
          if (!accessory[k]) {
            continue;
          }
          if (id == accessory[k].id) {
            var del = accessory.splice(k, 1);
            break;
          }
        }
        _this.addData.accessory = accessory;
      },
      // 列表多选 选中数据
      selectionChange: function (selection) {
        var _this = this;
        _this.selectionArr = selection;
      },
      // 隐藏编辑页面
      hideAddModal: function () {
        var _this = this;
        _this.addCurrentTableData = false;
      },
      // 显示添加界面
      add: function () {
        var _this = this;
        _this.addData.description = '';
        _this.addData.number = 1;
        _this.addData.type_id = '';
        _this.addData.approvers = '';
        _this.getApproversArr();
        _this.getFixedAssetsTypeArr();
        _this.getTreeData();
        _this.ajaxType = 'add';
        _this.addCurrentTableData = true;
      },
      // 保存数据
      save: function () {
        var _this = this;
        var description = _this.addData.description;
        var number = _this.addData.number;
        var type_id = _this.addData.type_id;
        var approvers = _this.addData.approvers;
        var CheckedNodes = _this.$refs.FixedAssets_tree.getCheckedNodes();
        if (type_id == '') {
          _this.$Message.error('请选择物品名!');
          return false;
        }
        if (description == '') {
          _this.$Message.error('请填写申请说明!');
          return false;
        }
        if (approvers == '') {
          _this.$Message.error('请选择审批人!');
          return false;
        }
        var departments = [];
        var users = [];
        for (var k in CheckedNodes) {
          if (!CheckedNodes[k]) {
            continue;
          }
          var id = CheckedNodes[k].id;
          var type = CheckedNodes[k].type;
          if (type == 'dep') {
            departments.push(id);
          } else if (type == 'user') {
            users.push(id);
          }
        }
        var data = {
          description: description,
          type_id: type_id,
          number: number,
          approvers: [approvers],
          inform: {
            users: users,
            departments: departments
          }
        };
        var url = '/asset/personal/apply';
        var params = {
          url: url,
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        _this.saveLoading = true;
        function _successFun(res) {
          _this.saveLoading = false;
          if (res.result == 0) {
            _this.page = 1;
            _this.getData();
            _this.addCurrentTableData = false;
            _this.addData.description = '';
            _this.addData.number = 1;
            _this.addData.type_id = '';
            _this.addData.approvers = '';
          } else {
            _this.$Message.error('保存信息失败!');
          }
        }
      },
      // 显示报修界面
      showRepair: function (data) {
        var _this = this;
        _this.getApproversArr();
        _this.getTreeData();
        var type_title = data.asset_type.title;
        var type_id = data.asset_type.id;
        var asset_count = data.asset_count;
        _this.repair.type_id = type_id;
        _this.repair.type_title = type_title;
        _this.repair.asset_count = asset_count;
        var data = {
          type_id: type_id,
        };
        var params = {
          url: '/asset/personal/query',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            var asset_id = _data.asset_id;
            var asset_number = _data.asset_number;
            var asset_Obj = {};
            for (var i in asset_number) {
              if (!asset_number[i]) {
                continue;
              }
              var key = asset_number[i];
              asset_Obj[key] = asset_id[i];
            }
            _this.repair.Checkbox = [];
            _this.repair.asset_Obj = asset_Obj;
            _this.repair.dataDetail = _data;
            _this.showRepairModal = true;
          } else {
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      // 隐藏报修界面
      hideRepairModal: function () {
        var _this = this;
        _this.showRepairModal = false;
      },
      // 报修保存
      saveRepair: function () {
        var _this = this;
        var type_id = _this.repair.type_id;
        var title = _this.repair.title;
        var description = _this.repair.description;
        var approvers = _this.repair.approvers;
        var Checkbox = _this.repair.Checkbox;
        var asset_Obj = _this.repair.asset_Obj;
        var number = Checkbox.length;
        var CheckedNodes = _this.$refs.repair_tree.getCheckedNodes();
        if (number == 0) {
          _this.$Message.error('请选择报修物品!');
          return false;
        }
        if (title == '') {
          _this.$Message.error('请填写报修原因!');
          return false;
        }
        if (description == '') {
          _this.$Message.error('请填写报修说明!');
          return false;
        }
        if (approvers == '') {
          _this.$Message.error('请选择审批人!');
          return false;
        }
        var departments = [];
        var users = [];
        for (var k in CheckedNodes) {
          if (!CheckedNodes[k]) {
            continue;
          }
          var id = CheckedNodes[k].id;
          var type = CheckedNodes[k].type;
          if (type == 'dep') {
            departments.push(id);
          } else if (type == 'user') {
            users.push(id);
          }
        }
        var asset_id = [];
        for (var k in Checkbox) {
          if (!Checkbox[k]) {
            continue;
          }
          var key = Checkbox[k];
          if (asset_Obj[key]) {
            asset_id.push(asset_Obj[key]);
          }
        }
        var data = {
          type_id: type_id,
          title: title,
          description: description,
          number: number,
          asset_id: asset_id,
          inform: users,
          approvers: [approvers],
        };
        var params = {
          url: '/asset/repair/apply',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            _this.$Message.success('申请报修成功!');
            _this.hideRepairModal();
            _this.repair.type_id = '';
            _this.repair.title = '';
            _this.repair.description = '';
            _this.repair.approvers = '';
            _this.repair.Checkbox = '';
          } else {
            _this.$Message.error('申请报修失败!');
          }
        }
      },
      // 删除
      remove: function () {
        var _this = this;
        var selectionArr = _this.selectionArr;
        if (selectionArr.length == 0) {
          _this.$Message.error('请填选择要删除的数据!');
          return false;
        }
        var selectionIds = [];
        for (var k in selectionArr) {
          if (!selectionArr[k]) {
            continue;
          }
          var id = selectionArr[k].id;
          selectionIds.push(id);
        }
        Modal.confirm(_this, {content: '确定删除选中的信息？'}, function () {
          var data = {
            id: selectionIds,
          };
          var params = {
            url: '/feedback/deleteMultiple',
            type: Util.method.get,
            data: data,
            success: _successFun
          };
          Util.ajax(_this, params);
          function _successFun(res) {
            if (res.result == 0) {
              _this.page = 1;
              _this.getData();
            } else {
              _this.$Message.error('删除信息失败!');
            }
          }
        }, function () {
        });
      },
      // 导出
      ExportData: function () {
        var _this = this;
        var fields = [
          {
            field: 'id',
            title: '#',
            type: 'int',
            order: 1,
          },
          {
            field: 'name',
            title: '姓名',
            type: 'varchar',
            order: 2,
          },
          {
            field: 'anonymous',
            title: '是否匿名',
            type: 'varchar',
            order: 3,
          },
          {
            field: 'content',
            title: '内容',
            type: 'varchar',
            order: 4,
          },
          {
            field: 'create_time',
            title: '时间',
            type: 'datetime',
            order: 5,
          },
        ];
        var fieldsStr = Util.toStr(fields);
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          type: 'app-suggest',
          fields: fieldsStr,
        };
        var params = {
          url: '/file/db2excle',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var url = res.data;
            var date = Utils.dateToDateString(new Date());
            Utils.DownloadFile(url, '导出我的报修_' + date + '.xlsx');
          } else {
            _this.$Message.error('导出信息失败!');
          }
        }
      },
    }
  };
</script>
